<template>
  <div class="tool-item rounded-lg overflow-hidden"
    :key="`gpt-${toolsData.g_id}`">
    <div class="py-5">
      <div class="flex items-center justify-between gap-4 flex-wrap">
        <div class="flex-1">
          <common-link path="/gpts/:handle"
            target="_blank"
            :params="{ handle: toolsData.g_id}"
            class="text-lg font-bold leading-6 text-gray-1000 go-gpts-detail hover:text-purple-1300">
            {{toolsData.name}}
          </common-link>
          <p class="text-sm text-gray-1500 line-2 mt-2"
            v-if="(hasRealVal(toolsData.ai_content) && hasRealVal(toolsData.ai_content.synopsis)) || hasRealVal(toolsData.describe)">
            {{toolsData.ai_content && toolsData.ai_content.synopsis ? toolsData.ai_content.synopsis : toolsData.describe}}
          </p>
        </div>
        <div class="flex tool-pic items-center justify-center skeleton-bg"
          ref="imgBox">
          <img class="w-full h-full flex-shrink-0 object-contain"
            :key="`logo-${toolsData.g_id}`"
            :src="toolsData.img_url ? toolsData.img_url : 'https://cdn.toolify.ai/gpt-default.webp'"
            v-real-img-gpt="toolsData.img_url"
            @load='imgOnError'
            :alt="toolsData.name ? toolsData.name : 'Toolify'"
            loading="lazy" />
        </div>
      </div>
      <div class="mt-6">
        <a :href="toolsData.link"
          rel="nofollow"
          target="_blank"
          class="inline-flex items-center justify-center max-w-full border border-gray-1000 rounded go-gpts-home hover:text-white hover:border-purple-1300 hover:bg-purple-1300">
          {{$t('gpts_open')}}
        </a>
      </div>
    </div>
    <div class="border-t border-gray-2000 py-4">
      <div class="flex items-center flex-wrap gap-2">
        <svg-icon iconName="bianji"
          className="text-sm"></svg-icon>
        <a v-if="hasRealVal(toolsData.official_website_link)"
          :href="toolsData.official_website_link"
          rel="nofollow"
          target="blank"
          class="text-sm text-gray-1000 hover:text-purple-1300">
          {{toolsData.author ? toolsData.author:toolsData.official_website_link}}
        </a>
        <span v-else-if="hasRealVal(toolsData.author)"
          class="text-sm text-gray-1000">{{toolsData.author}}</span>
        <span v-else
          class="text-sm text-gray-1000">community builder</span>
        <i class="circle"
          v-if="hasRealVal(toolsData.created_at)"></i>
        <span class="text-sm text-gray-1000">{{$formattedDate(toolsData.created_at, fI18n, locale, false, true, true)}}</span>
        <span class="text-sm text-gray-1000"
          v-if="hasRealVal(toolsData.num_conversations)">-</span>
        <span class="text-sm text-gray-1000"
          v-if="hasRealVal(toolsData.num_conversations)">{{$t('gpts_numberOofCalls', {num:$vReset(toolsData.num_conversations)})}}</span>
      </div>
      <div class="flex items-center flex-wrap gap-2 mt-2"
        v-if="hasRealVal(toolsData.ai_content) && Array.isArray(toolsData.ai_content.categories) && toolsData.ai_content.categories.length > 0">
        <div class="border border-purple-1500 rounded px-2 py-1 text-sm text-purple-1700"
          v-for="(item, key) in toolsData.ai_content.categories">{{item}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'GptsTool',
  props: {
    toolsData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      loading: false,
    }
  },
  computed: {
    ...mapState({
      locale: (state) => state.locale,
    }),
  },
  methods: {
    fI18n(arg) {
      const hasKey = this.$i18n.t(arg)
      if (hasKey) {
        const result = this.$i18n.t(arg)
        return result
      }
      return arg
    },
    imgOnError() {
      this.$refs.imgBox.classList.remove('skeleton-bg')
    },
  },
}
</script>
<style lang='scss' scoped>
.tool-item {
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e5e5;
  padding: 0 20px;
  .tool-pic {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
  }
  .go-gpts-home {
    min-width: 120px;
    height: 38px;
  }
  .circle {
    display: block;
    width: 4px;
    height: 4px;
    background: #000000;
    border-radius: 50%;
  }
}
</style>
